<template>
    <div class="footer">
        <ul>
            <li><router-link to="/zhuye" active-class="active">
            <img src="@/assets/images/icon-red/home-red.png" class="active-icon">
            <img src="@/assets/images/icon/home.png" class="no-active-icon">
            <span>主页</span>
            </router-link></li>
            <li>
            <router-link to="xuanyi" active-class="active">
                <img src="@/assets/images/icon-red/cloth-red.png" class="active-icon">
                <img src="@/assets/images/icon/cloth.png" class="no-active-icon">
                <span>选衣</span>
            </router-link>
             </li>
            <li>
            <router-link to="meixiang" active-class="active">
                <img src="@/assets/images/icon-red/share-red.png" class="meixiang active-icon">
                <img src="@/assets/images/icon/share.png" class="meixiang no-active-icon">
                <span>美享圈</span>
            </router-link>
            </li>
            <li>
            <router-link to="yidai" active-class="active">
                <img src="@/assets/images/icon-red/cloth-red.png" class="active-icon">
                <img src="@/assets/images/icon/cloth.png" class="no-active-icon">
                <span>衣袋</span>
            </router-link>
           </li>
            <li>
            <router-link to="wode" active-class="active">
                <img src="@/assets/images/icon-red/people-red.png" class="active-icon">
                <img src="@/assets/images/icon/people.png" class="no-active-icon">
                <span>我的</span>
            </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
export default({
    name:'homeFoot'
})
</script>
<style lang="less">
    .footer{
        height:2.5rem;
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        border-top:1px solid #e9eaec;
        background-color:#fff;
        ul{ 
            height:100%;
            width:100%;
            li{
                width:20%;
                height:100%;
                line-height:100%;
                float:left;
                display:flex;
                flex-direction:col;
                -webkit-flex-direction:col;
                align-items:center;
                justify-content:center;
                .active-icon{
                        display:none;
                 }
                 a{
                    display:block;
                    height:100%;
                    width:100%;
                    display:flex;
                    flex-direction:col;
                    -webkit-flex-direction: column; 
                     flex-direction:column;
                    justify-content:center;
                    align-items:center;
                    color:#000;
                 }
                 img{
                    height:0.9rem;
                    width:0.9rem;
                    margin-bottom:0.2rem;
                 }
                 .meixiang{
                    height:2rem;
                    width:2rem;
                    margin-top:-1rem;
                 }
                 span{
                    height:0.6rem;
                    width:100%;
                    line-height:0.8rem;
                    text-align:center;
                    font-size:0.65rem;
                 }
                .active{
                    color:#F75B93;
                     .no-active-icon{
                        display:none;
                    }
                     .active-icon{
                        display:inline-block;
                    }
                }
            }
        }
    }
</style>